<template>
  <el-form label-position="top" class="p-10">
    <el-form-item label="步骤数">
      <el-input-number v-model="activeData.extConfig.stepNumber" :min="1" />
    </el-form-item>
    <el-form-item label="步骤条样式">
      <el-radio-group v-model="activeData.extConfig.direction">
        <el-radio label="horizontal">横向</el-radio>
        <el-radio label="vertical">竖向</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item  v-for="(item, index) in resourceLists" :key="index" :label='`第${index + 1}步页面资源`'>
      <FormViewSelector
        class="w-100p"
        placeholder="绑定资源"
        :view-id.sync="item.viewId"
        view-code="form"
        :show-form-option="true"
        :disabled="false"
      />
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  name: "formSteps-config",
  props: ["activeData"],
  data() {
    return {};
  },
  computed: {
    resourceLists() {
      let arr = []
      for (let i = 0; i < this.activeData.extConfig.stepNumber; i++) {
        const obj = { viewId: '' }
        arr.push(obj)
      }
      return arr
    }
  },
  watch: {
      resourceLists: {
        immediate: true,
        deep: true,
        handler(val) {
          if (val) {
            this.$set(this.activeData.extConfig, "resourceLists", val)
          }
        },
      },
    },
  methods: {},
};
</script>